<template>
    <div>
        <cus-modal
            ref="modal"
            :title="form.modeId ? form.modeName + ' - 菜肴配置' : '配餐设置'"
            @on-visible-change="onVisibleChange"
            width="900"
            @onOk="onOk"
            okBtnName="保存配置"
        >
            <div style="margin-bottom:10px;display:flex;justify-content: space-between;align-items: center;">
                <div>模式名称：<Input v-model="form.modeName" :maxlength="50" :clearable="!form.modeId" placeholder="请输入模式名称" style="width: 200px" readonly></Input></div>
                <div>
                    <Button type="primary" @click="addData">添加</Button>
                </div>
            </div>
            <Table border :loading="loading" :columns="columns" :data="showData">
                <template slot-scope="{ row, index }" slot="mealTime">
                    <Select
                        v-model="showData[index].mealTime"
                        placeholder="请选择餐次"
                        clearable
                        transfer
                    >
                        <Option :value="item" v-for="(item, idx) in canList" :key="idx">{{ item }}</Option>
                    </Select>
                </template>
                <template slot-scope="{ row, index }" slot="dishCategory">
                    <Select
                        v-model="showData[index].dishCategory"
                        placeholder="请选择菜肴分类"
                        clearable
                        transfer
                        @on-change="(value) => { changeDishCategory(value, index) }"
                    >
                        <Option :value="item.dishCategory" v-for="(item, idx) in dishesTypeList" :key="idx">{{ item.dishCategory }}</Option>
                    </Select>
                </template>
                <template slot-scope="{ row, index }" slot="dishName">
                    <cus-autoComplete :value.sync="showData[index].typeForm"
                        key-label="dishName"
                        key-value="dishCode"
                        placeholder="请输入菜肴名称选择菜肴"
                        return-label="data"
                        fncLabel="dishName"
                        :cusParams="{'dishType': showData[index].dishCategory, pageSize: 10000}"
                        :fnc="selectailocalfoodBydish"></cus-autoComplete>
                </template>
                <template slot-scope="{ row,index }" slot="operation">
                    <div class="flex">
                        <cus-button type="text" size="small" :style="{color: '#FF4746',padding: '0 8px'}" @onClick="deleteItem(index)">
                            删除
                        </cus-button>
                    </div>
                </template>
            </Table>
            <div style="width: 100%;display: flex;justify-content: flex-end">
                <cus-page :data="pages" class="mt_10" @pageChange="pageChange" :showElevator="false" :showSizer="false"></cus-page>
            </div>
        </cus-modal>
    </div>
</template>

<script>
import { selectailocaldishtype, cateringModeDishesList, selectailocalfoodBydish, cateringModedtlAlter } from "@/api/business/dishesModule";

export default {
    data() {
        return {
            selectailocalfoodBydish: selectailocalfoodBydish,
            loading: false,
            form: {modeId: '', modeName: ''},
            columns: [
                {
                    title: '序号',
                    width: 70,
                    type: 'index',
                    align: 'center'
                },
                {
                    title: '餐次',
                    slot: 'mealTime',
                    align: 'center',
                },
                {
                    title: '菜肴类型',
                    slot: 'dishCategory',
                    align: 'center',
                },
                {
                    title: '菜肴名称',
                    slot: 'dishName',
                    align: 'center',
                    width: 250,
                },
                {
                    title: '操作',
                    slot: 'operation',
                    align: 'center'
                },
            ],
            data: [],
            showData: [],
            showTable: false,
            pages: {
                page: 1,
                pageSize: 10,
                pageTotal: 0
            },
            dishesTypeList: [], // 菜肴分类列表
            canList: ['早餐', '午餐', '晚餐']

        };
    },
    mounted() {
        
    },
    methods: {
        onVisibleChange(v) {
            if (!v) {
                this.form = {modeId: '', modeName: ''};
                this.data = [];
                this.showData = [];
                this.pages = {
                    page: 1,
                    pageSize: 10,
                    pageTotal: 0
                }
            }
        },
        show() {
            this.$refs["modal"].show = true;
            this.selectailocaldishtypeApi()
            this.cateringModeDishesListApi();
        },
        onOk() {
            this.cateringModedtlAlterApi()
        },
        // 获取模板信息
        cateringModeDishesListApi() {
            this.loading = true;
            this.data = [];
            return new Promise((resolve) => {
                cateringModeDishesList({
                    modeId: this.form.modeId,
                    current: 1,
                    size: 10000
                }).then((res) => {
                    this.loading = false;
                    if (res.retCode === 2000) {
                        res.data.forEach(item => {
                            item.typeForm = {
                                dishName: item.dishName || '',
                                dishCode: item.dishCode || ''
                            }
                        })
                        this.data = this.$cu.deepClone(res.data);
                        this.pageChange();
                        
                        resolve();
                    }
                });
            });
        },
        // 前端分页
        pageChange() {
            this.showData = [];
            this.data.forEach((item, index) => {
                if(index <= this.pages.pageSize * this.pages.page - 1 && index >= ((this.pages.page - 1) * this.pages.pageSize)) {
                    this.showData.push(item)
                }
            })
            this.pages.pageTotal = this.data.length;
        },
        // 获取菜肴分类列表
        selectailocaldishtypeApi() {
            return new Promise((resolve) => {
                selectailocaldishtype({}).then((res) => {
                    if (res.retCode === 2000) {
                        this.dishesTypeList = res.data;
                        resolve();
                    }
                });
            });
        },
        // 删除一条
        deleteItem(index) {
            let aIndex = this.pages.pageSize*(this.pages.page - 1) + index;
            this.data.splice(aIndex, 1)
            this.pageChange()
        },
        addData() {
            this.data.push({
                dishCategory: "",
                dishCode: null,
                dishName: null,
                id: "",
                mealTime: "",
                modeId: this.form.modeId,
                typeForm: {
                    dishName: "",
                    dishCode: ""
                }
            })
            this.pages.page = Math.ceil(this.data.length/this.pages.pageSize);
            this.pageChange();
        },
        changeDishCategory(value, index) {
            console.log(value)
            let aIndex = this.pages.pageSize*(this.pages.page - 1) + index;
            this.data[aIndex].typeForm.dishName = "";
            this.data[aIndex].typeForm.dishCode = "";
            this.pageChange();
        },
        // 保存
        cateringModedtlAlterApi() {
            this.loading = true;
            let arr = [];
            this.data.forEach(item => {
                arr.push({
                    id: item.id || 0,
                    modeId: this.form.modeId,
                    mealTime: item.mealTime,
                    dishCategory: item.dishCategory,
                    dishName: item.typeForm.dishName,
                    dishCode: item.typeForm.dishCode
                })
            })
            return new Promise((resolve) => {
                cateringModedtlAlter({
                    modeId: this.form.modeId,
                    cateringModeDtl: arr
                }).then((res) => {
                    this.loading = false;
                    if (res.retCode === 2000) {
                        this.$Message.success("配餐模式明细修改成功.")
                        this.$refs["modal"].show = false;
                        this.$emit("peiSuccess")
                        resolve();
                    }
                });
            });
        },
    },
};
</script>

<style scoped lang="less">
.permission {
    height: 300px;
    width: 500px;
    border: 1px solid #dcdee2;
    overflow-y: auto;
    border-radius: 2px;
    padding: 0 0 0 10px;
}
</style>
